<<<<<<< HEAD

var builderJson = {
    "charts": {
        "人事部": 305,
        "财政部": 442,
        "民政部": 590,
        "技术部": 662,
        "工商部": 760,
        "卫生部": 837,
        "交通部": 908,
        "教育部": 1107,
        "劳动部": 1292,
        "公安部": 1568
    },
    "components": {
        "人事部": 210,
        "财政部": 269,
        "民政部": 341,
        "技术部": 389,
        "工商部": 421,
        "卫生部": 532,
        "交通部": 645,
        "教育部": 987,
        "劳动部": 1211,
        "公安部": 1541
    },
    "ie": 9743
};
/*var waterMarkText = 'ECHARTS';*/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
var textColor = '#fff';
/*ctx.fillText(waterMarkText, 0, 0);*/

option = {
    backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'repeat'
    },
    tooltip: {},
    title: [{
        text: '部门月工作效率排名',
        x: '25%',
        textAlign: 'center',
        textStyle:{
            color:'#aaa'
        }

    }, {
        text: '部门年工作效率排名',
        x: '75%',
        textAlign: 'center',
        textStyle:{
            color:'#aaa'
        }
    }],
    // grid: [{
    //     top: 50,
    //     width: '50%',
    //     bottom: '45%',
    //     left: 10,
    //     containLabel: true
    // }, {
    //     top: '55%',
    //     width: '50%',
    //     bottom: 0,
    //     left: 10,
    //     containLabel: true
    // }]
    // ,

    grid: [
        {x: '7%', y: '14%', width: '38%', height: '68%'},
        {x2: '7%', y: '14%', width: '38%', height: '68%'},
        // {x: '7%', y2: '7%', width: '38%', height: '38%'},
        // {x2: '7%', y2: '7%', width: '38%', height: '38%'}
    ],

    xAxis: [{
        type: 'value',

        max: builderJson.all,
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false

        }
    }, {
        type: 'value',

        max: builderJson.all,
        gridIndex: 1,
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',

        data: Object.keys(builderJson.charts),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 1,
        type: 'category',

        data: Object.keys(builderJson.components),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },

        itemStyle: {
            normal: {
                /*     barBorderRadius: 15,*/
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                        offset: 1,
                        color: '#00feff'
                    },
                        {
                            offset: 0.5,
                            color: '#027eff'
                        },
                        {
                            offset: 0,
                            color: '#0286ff'
                        }
                    ]
                )
            }
        },


        data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'chart',
        silent: true,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.all - builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },

        itemStyle: {
            normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00b0ff'
                }, {
                    offset: 1,

                    color: '#4CC76D'
                }]),
                /*  barBorderRadius: 15,
                  borderWidth: 0,*/
            }
        },
        data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.components[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        silent: true,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.all - builderJson.components[key];
        })
    }, ]
}


var mychart4 =echarts.init(document.getElementById('charts4'));
mychart4.setOption(option);
=======

var builderJson = {
    "charts": {
        "人事部": 305,
        "财政部": 442,
        "民政部": 590,
        "技术部": 662,
        "工商部": 760,
        "卫生部": 837,
        "交通部": 908,
        "教育部": 1107,
        "劳动部": 1292,
        "公安部": 1568
    },
    "components": {
        "人事部": 210,
        "财政部": 269,
        "民政部": 341,
        "技术部": 389,
        "工商部": 421,
        "卫生部": 532,
        "交通部": 645,
        "教育部": 987,
        "劳动部": 1211,
        "公安部": 1541
    },
    "ie": 9743
};
/*var waterMarkText = 'ECHARTS';*/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
var textColor = '#fff';
/*ctx.fillText(waterMarkText, 0, 0);*/

option = {
    backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'repeat'
    },
    tooltip: {},
    title: [{
        text: '部门月工作效率排名',
        x: '25%',
        textAlign: 'center',
        textStyle:{
            color:'#aaa'
        }

    }, {
        text: '部门年工作效率排名',
        x: '75%',
        textAlign: 'center',
        textStyle:{
            color:'#aaa'
        }
    }],
    // grid: [{
    //     top: 50,
    //     width: '50%',
    //     bottom: '45%',
    //     left: 10,
    //     containLabel: true
    // }, {
    //     top: '55%',
    //     width: '50%',
    //     bottom: 0,
    //     left: 10,
    //     containLabel: true
    // }]
    // ,

    grid: [
        {x: '7%', y: '14%', width: '38%', height: '68%'},
        {x2: '7%', y: '14%', width: '38%', height: '68%'},
        // {x: '7%', y2: '7%', width: '38%', height: '38%'},
        // {x2: '7%', y2: '7%', width: '38%', height: '38%'}
    ],

    xAxis: [{
        type: 'value',

        max: builderJson.all,
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false

        }
    }, {
        type: 'value',

        max: builderJson.all,
        gridIndex: 1,
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',

        data: Object.keys(builderJson.charts),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 1,
        type: 'category',

        data: Object.keys(builderJson.components),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        axisLine:{
            lineStyle:{
                color:'#aaa'
            }
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },

        itemStyle: {
            normal: {
                /*     barBorderRadius: 15,*/
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                        offset: 1,
                        color: '#00feff'
                    },
                        {
                            offset: 0.5,
                            color: '#027eff'
                        },
                        {
                            offset: 0,
                            color: '#0286ff'
                        }
                    ]
                )
            }
        },


        data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'chart',
        silent: true,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.all - builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },

        itemStyle: {
            normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00b0ff'
                }, {
                    offset: 1,

                    color: '#4CC76D'
                }]),
                /*  barBorderRadius: 15,
                  borderWidth: 0,*/
            }
        },
        data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.components[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        silent: true,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.all - builderJson.components[key];
        })
    }, ]
}


var mychart4 =echarts.init(document.getElementById('charts4'));
mychart4.setOption(option);
>>>>>>> 64023929a954491135e98eced71561cf8107da2a
